<template>
<view>
<!-- <view wx:for="{{details}}"> -->
  <view class="banner">
    <swiper :autoplay="autoplay" :interval="interval" :duration="duration">
      <block v-for="(item, index) in imgUrls" :key="index">
        <swiper-item>
          <image :src="item" class="slide-image"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="title-warp">
    <view class="title">
      <text>欧诗漫水活化妆品套装专柜女补水保湿乳液珍珠护肤品水乳官网正品</text>
    </view>
    <view class="current">
      ￥
      <text>1999.00</text>
    </view>
    <view class="repertory fr">
      库存
      <text>166</text>
    </view>
  </view>
  <view class="appraise-warp">
    <view v-for="(item, index) in navList" :key="index" @tap="getStatus" :id="'NAV' + index" class="appraise-title" :data-index="index">
      <view @tap="EventHandle">
        <text :class="index === status ? 'active' : ''">{{item}}</text>
      </view>
    </view>
    <view :hidden="status!==0" class="particulars-warp">
      <view class="particulars">
        <image></image>
      </view>
    </view>
    <view :hidden="status!==1" class="particulars-warp">
      <view v-for="(item, index) in commentlist" :key="index" class="appraise">
        <view class="appraise-pic">
          <image :src="item.avatar"></image>
        </view>
        <view class="appraise-name">
          <text>{{item.nickname}}</text>
        </view>
        <view class="appraise-time fr">
          <text>{{item.createTime}}</text>
        </view>
        <view class="appraise-cont">
          <text>{{item.content}}</text>
        </view>
        <view v-for="(pic, index2) in item.picture" :key="index2" class="cont-pic list">
          <image :src="pic"></image>
        </view>
      </view>
    </view>
  </view>
  <view class="bottom-warp list">
    <view class="left">
      <!-- <view class='left-head fl'>
        <image src='../../img/Headphones_icon.png'></image>
      </view> -->
      <view class="line"></view>
      <view class="left-col">
        <view @tap="changepic">
          <view>
            <image src="/static/remao_shop/img/mine-shoucang_icon.png"></image>
          </view>
          <view :class="'showhidden brighthide' + (showView?'brightshow':'')">
            <image src="/static/remao_shop/img/xq-yishoucang_icon.png"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="middle" @tap="popupshow">
      <text>加入购物车</text>
    </view>
    <view class="right" @tap>
      <text>直接购买</text>
    </view>
  </view>
  <view class="mask-box" :hidden="popup">
    <view @tap="popuphidden" style="width:100%;height:650rpx;"></view>
    <view class="mask-bot">
      <view @tap="popuphidden">
        <view class="popup-warp">
          <view class="popup-pic fl">
            <image></image>
          </view>
          <view class="pop-warp fr">
            <view class="pop-title">
              <text>欧诗漫水活化妆品套装专柜女补水保湿乳液珍珠护肤品水乳官网正品</text>
            </view>
            <view class="pop-current">
              ￥
              <text>1999.00</text>
            </view>
            <view class="pop-repertory fr">
              库存
              <text>166</text>
            </view>
          </view>
        </view>
      </view>
      <view class="spec-warp">
        <view class="spec">
          <text>规格</text>
        </view>
        <view class="option-warp">
          <view v-for="(item, index) in poplist" :key="index" @tap="option" class="frame fl" :data-index="index">
            <view @tap="EventHandle">
              <text :class="index === pop ? 'op-active' : 'normal'">{{item}}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="count-warp">
        <view class="spec">
          <text>数量</text>
        </view>
        <view class="but">
          <text>-</text>
          <text class="but-count">10</text>
          <text>+</text>
        </view>
      </view>
      <view class="btn-sure">
        <view class="confirm" @tap="optionsure">
          <text>确定</text>
        </view>
      </view>
    </view>
  </view>
<!-- </view> -->
</view>
</template>

<script>
// var util = require('../../utils/util.js');
// import request from '../../utils/requestUtils.js';
// import {
//   xcxId,
//   details_url,
//   commentlist_url
// } from "../../utils/data.js";
var app = getApp();

export default {
  data() {
    return {
      navList: ["详情", "评价"],
      poplist: ["洁面、水、乳三件套", "水、乳两件套"],
      boolean: false,
      imgUrls: ["/static/remao_shop/img/details-banner.png", "/static/remao_shop/img/details-banner.png"],
      // countDownList: [],
      // actEndTimeList: [],
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 1000,
      status: 0,
      pop: 0,
      showView: true,
      popup: true,
      details: "",
      commentlist: "",
      hidden: false
    };
  },

  components: {},
  props: {},
  //生命周期函数--监听页面加载
  onLoad: function (options) {
    this.detailsFun();
    this.commentlistFun(); //收藏初始

    showView: options.showView == "true" ? true : false;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    detailsFun: function (id, specId) {
      var openId = wx.getStorageSync("openid");
      var $this = this;
      var params = {
        id: 1,
        specId: 0
      };
      request.POST({
        url: details_url,
        params: params,
        header: request.postHeader,
        success: function (res) {
          if (!res) {
            util.confirm(res.data.msg);
            return;
          }

          var resultData = res.data.data;
          console.log(res.data);
          $this.setData({
            details: resultData // goods: resultData.goods

          });
        },
        fail: function (res) {//失败后的逻辑
        }
      });
    },
    commentlistFun: function (id, offset, limit) {
      var openId = wx.getStorageSync("openid");
      var $this = this;
      var params = {
        id: 1,
        offset: 1,
        limit: 1
      };
      request.POST({
        url: commentlist_url,
        params: params,
        header: request.postHeader,
        success: function (res) {
          var resultData = res.data.data;
          $this.setData({
            commentlist: resultData.data
          });
        },
        fail: function (res) {//失败后的逻辑
        }
      });
    },
    popupshow: function () {
      this.setData({
        popup: false
      });
    },
    //弹框消失
    popuphidden: function () {
      this.setData({
        popup: true
      });
    },

    //点击确定
    optionsure(e) {
      this.setData({
        popup: true
      });
      var carts = wx.getStorageSync("carts") || [];
      var exist = carts.find(function (el) {
        return el.id == e.target.dataset.id;
      }); //如果购物车里面有该商品那么他的数量每次加一

      if (exist) {
        exist.value = parseInt(exist.value) + 1;
      } else {
        carts.push({// goodsId: e.target.dataset.goodsId,
        });
      }

      wx.showToast({
        title: "加入购物车成功！",
        duration: 1000
      }); //更新缓存数据

      wx.setStorageSync("carts", carts);
    },

    //详情评价点击事件
    getStatus(e) {
      this.setData({
        status: e.currentTarget.dataset.index,
        hidden: false
      });
    },

    option(e) {
      this.setData({
        pop: e.currentTarget.dataset.index
      });
    },

    changepic: function () {
      var that = this;
      that.setData({
        showView: !that.showView
      });
    }
  }
};
</script>
<style>
@import "./details.css";
</style>